<template>
  <div class="BaseSearchBar">
    <el-card body-style="padding:0px"
             style="height: 105px;">
      <!-- 标题 -->
      <div class="search-title">
        <span>条件搜索栏</span>
      </div>
      <div>
        <el-row type="flex"
                justify="flex-start">
          <!-- 搜索关键字 -->
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable"
                   class="key">审查开始时间:</div>
              <div slot="input">
                <el-date-picker v-model="queryInfoChild.startTime"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions"
                                style="width: 100%;">
                </el-date-picker>
              </div>
            </BaseSearchBarItem>
          </el-col>

          <!-- 配对状态 -->
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable">审查结束时间:</div>
              <div slot="input">
                <el-date-picker v-model="queryInfoChild.endTime"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions"
                                style="width: 100%;">
                </el-date-picker>
              </div>
            </BaseSearchBarItem>
          </el-col>
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable">药品关键字:</div>
              <div slot="input">
                <el-input v-model="queryInfoChild.drugKeyword"
                          placeholder="请输入关键字" />
              </div>
            </BaseSearchBarItem>
          </el-col>
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable">医生名称:</div>
              <div slot="input">
                <el-input v-model="queryInfoChild.ysdm"
                          placeholder="请输入医生姓名" />
              </div>
            </BaseSearchBarItem>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="2"> </el-col>
        </el-row>
        <el-row type="flex"
                justify="flex-start">
          <!-- 搜索关键字 -->
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable"
                   class="key">科室名称:</div>
              <div slot="input">
                <el-input v-model="queryInfoChild.deptId"
                          placeholder="请输入科室" />
              </div>
            </BaseSearchBarItem>
          </el-col>

          <!-- 配对状态 -->
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable">滤镜状态:</div>
              <div slot="input">
                <el-select v-model="queryInfoChild.filterState"
                           placeholder="全部">
                  <el-option v-for="item in FilterState"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value" />
                </el-select>
              </div>
            </BaseSearchBarItem>
          </el-col>
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable">审查类别:</div>
              <div slot="input">
                <el-select v-model="queryInfoChild.search_slCode"
                           placeholder="全部">
                  <el-option v-for="item in reviewCategory"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value" />
                </el-select>
              </div>
            </BaseSearchBarItem>
          </el-col>
          <el-col :span="5">
            <BaseSearchBarItem>
              <div slot="lable">审查类别:</div>
              <div slot="input">
                <el-select v-model="queryInfoChild.type"
                           placeholder="全部">
                  <el-option v-for="item in reviewCategory2"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value" />
                </el-select>
              </div>
            </BaseSearchBarItem>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="2"
                  style="margin-left: 12px;display:flex;align-items:flex-end;margin-bottom:5px">
            <el-button type="primary"
                       class="button1"
                       size="medium"
                       v-on:click="SearchEvent">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
import BaseSearchBarItem from "../../../components/BaseSearchBarItem";
export default {
  name: "BaseSearchBar",
  components: {
    BaseSearchBarItem
  },
  props: {
    isShow: {
      input: null,
      key: null
    }
  },
  data () {
    return {
      queryInfoChild: {
        // 开始时间
        startTime: "",
        // 结束时间
        endTime: "",
        // 药品名称
        drugKeyword: "",
        // 医生名称
        ysdm: "",
        // 科室名称
        deptId: "",
        // 审查类别 0：拦截，1：禁忌，2：不推荐，3：轻微
        search_slCode: "",
        // 滤镜状态 1：不为空，0为空
        filterState: "",
        // 审查类型 1 剂量 2体外配伍
        type: "",
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      FilterState: [
        {
          value: "已生成",
          label: "已生成"
        },
        {
          value: "未生成",
          label: "未生成"
        }
      ],
      reviewCategory: [
        {
          value: "拦截",
          label: "拦截"
        },
        {
          value: "禁忌",
          label: "禁忌"
        },
        {
          value: "不推荐",
          label: "不推荐"
        },
        {
          value: "轻微",
          label: "轻微"
        }
      ],
      reviewCategory2: [
        {
          value: "剂量",
          label: "剂量"
        },
        {
          value: "相互作用",
          label: "相互作用"
        },
        {
          value: "禁忌症",
          label: "禁忌症"
        },
        {
          value: "超适应症",
          label: "超适应症"
        },
        {
          value: "儿童用药",
          label: "儿童用药"
        },
        {
          value: "老人用药",
          label: "老人用药"
        },
        {
          value: "妊娠用药",
          label: "妊娠用药"
        },
        {
          value: "性别用药",
          label: "性别用药"
        },
        {
          value: "给药途径",
          label: "给药途径"
        },
        {
          value: "体外配伍",
          label: "体外配伍"
        },
        {
          value: "重复用药",
          label: "重复用药"
        },
        {
          value: "成人用药",
          label: "成人用药"
        },
        {
          value: "抗菌药物分级",
          label: "抗菌药物分级"
        },
        {
          value: "围手术期",
          label: "围手术期"
        },
        {
          value: "耐药率",
          label: "耐药率"
        },
        {
          value: "不良反应",
          label: "不良反应"
        },
        {
          value: "配伍浓度",
          label: "配伍浓度"
        },
        {
          value: "过敏源",
          label: "过敏源"
        }
      ],
    };
  },
  methods: {
    SearchEvent: function () {
      // console.log(this.queryInfoChild)
      this.$emit("ChildSearchEvent", this.queryInfoChild)
      // console.log(this.queryInfoChild)
    }
  }
};
</script>
<style scoped>
.BaseSearchBar >>> .el-card__body {
  height: 105px;
  display: flex;
  flex-wrap: nowrap;
}
.search-title {
  color: #696969;
  border-right: 1px solid #c2c2c2;
  height: 105px;
  width: 9%;
  text-align: center;
  line-height: 105px;
  font-size: 15px;
}
.BaseSearchBar {
  font-size: 12px;
}
</style>

